<template>
  <div id="myChart" class="kline-BoxMain">

  </div>
</template>

<script>
import echarts from "echarts";

export default {
  name: "deepChart",
  data() {
    return {
    };
  },
  mounted() {
    this.drawLine()
  },
  props: {

  },
  computed: {},
  watch: {

  },
  methods: {



    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        xAxis: {
          type: 'category',
          data: ['17:30', '17:31', '19:30', '21:30','17:30', '17:31', '19:30', '21:30','17:30', '17:31', '19:30', '21:30'],
          axisLabel: {
            show: true,
            color: '#ffffff',
            fontSize: 12
          },
          splitLine:{show: false}
        },
        yAxis: {
          position: "right",
          axisLabel: {
            show: true,
            color: '#ffffff',
            fontSize: 12
          },
          splitLine:{show: false}
        },
        series: [
          {
            data: [150, 230, 224, 210,150, 230, 224, 210,150, 230, 224, 210],
            type: 'line',
            itemStyle: {
							color: '#505261',
						},
            showSymbol: false
          }
        ]
      });
    },
  },
};
</script>
<style scoped>
.kline-BoxMain {
  width: 100%;
  height: 600px;
}
</style>
